// import React, { useState } from 'react'
import { Badge, TabBar } from 'antd-mobile'

import {
  AppOutline,
  MessageOutline,
  MessageFill,
 GiftOutline,
  BellOutline,
  AppstoreOutline
} from 'antd-mobile-icons'
import {  useNavigate } from 'react-router-dom'

function Index() {
    const nav=useNavigate()
    
    const tabs = [
    {
      path: '/home',
      title: '就医',
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      path: '/index',
      title: '消息',
      icon: <BellOutline />,
      badge: '5',
    },
    {
      path: '/shop',
      title: '商城',
      icon: <GiftOutline />,
      badge: '5',
    },
    {
      path: '/case',
      title: '患者案例',
      icon: <AppstoreOutline />,
      badge: '5',
    },
    {
      path: '/order',
      title: '我的',
      icon: (active: boolean) =>
        active ? <MessageFill /> : <MessageOutline />,
      badge: '99+',
    },
  
  ]



  return (
    <div style={{position:'fixed',bottom:0,left:0,right:0,height:'50px',zIndex:999,backgroundColor:'#ffffff'}}>

      <TabBar onChange={(key)=>nav(key)}>
          {tabs.map(item => (
            <TabBar.Item key={item.path} icon={item.icon} title={item.title} />
          ))}
        </TabBar>  
       
    </div>
  )
}

export default Index
